<template>
	<div class="v-content">
		<el-dialog :visible='show' title="访问记录" @close="show=false">
			<el-row>
				<el-date-picker @change="setDate" style="margin-bottom: 20px;" v-model="datevalue" type="datetimerange"
					:picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
					align="right">
				</el-date-picker>
				<el-button type="primary" @click="searchInfo" style="margin-left: 20px;">搜索</el-button>
				<el-button type="" @resetSearch>重置</el-button>
				<el-button type="primary" @click="exportInfo">导出</el-button>
			</el-row>
			<el-table height="500px" :data="tableData" border style="width: 100%" stripe>
				<el-table-column prop="id" label="ID" width="100">
				</el-table-column>
				<el-table-column prop="title" label="标题" width="180">
				</el-table-column>
				<el-table-column prop="nickname" label="访问人">
				</el-table-column>
				<el-table-column prop="phone" label="手机号码" width="180">
				</el-table-column>
				<el-table-column prop="num" label="访问时间" width="180">
					<template slot-scope="scope">
						{{ scope.row.addtime | datefilter }}
					</template>
				</el-table-column>
			</el-table>
			<Pagination2 :currentPage="form.pageNo" :size="form.pageSize" :total="total" @changelimit="changelimit"
				@changecurrentPage="changecurrentPage"></Pagination2>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		procureLogs,
		exportProcureLogs
	} from '@/api/servetypeIndex'
	export default {
		filters: {
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		data() {
			return {
				datevalue: [],
				show: false,
				total: 0,
				tableData: [],
				form: {
					pageNo: 1,
					pageSize: 15
				},
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				id: '',
				searchflag: false
			}
		},
		methods: {
			exportInfo() {
				console.log('this.id',this.id)
				let params = {
					procuresid: this.id,
					paytime: this.searchflag ? Date.parse(this.datevalue[0]) / 1000 : 0,
					endtime: this.searchflag ? Date.parse(this.datevalue[1]) / 1000 : 0,
				}
				
				axios({
					method: 'get',
					url: 'http://zdb.suishilian.com/admin/excelprocurelogs',
					params:params,
					responseType: 'blob',

				}).then(res => {
					const blob = new Blob([res.data], {
						type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
					})
					const a = document.createElement('a')
					const href = window.URL.createObjectURL(blob)
					a.href = href
					a.download = '访问记录'
					document.body.appendChild(a)
					a.click()
					// console.log(a)
					document.body.removeChild(a)
					window.URL.revokeObjectURL(href)
				})

			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getList();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getList();
			},
			initData(v) {
				this.show = true
				this.id = v.id
				this.getList()
			},
			resetSearch() {
				this.searchflag = false
				this.form.pageNo = 1
				this.getList()
			},
			searchInfo() {
				this.searchflag = true
				this.form.pageNo = 1
				this.getList()
			},
			getList() {
				procureLogs({
					procuresid: this.id,
					paytime: this.searchflag ? Date.parse(this.datevalue[0]) / 1000 : 0,
					endtime: this.searchflag ? Date.parse(this.datevalue[1]) / 1000 : 0,
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize
				}).then(res => {
					this.tableData = res.data.data
					this.total = res.data.totalCount
				})
			},
			setDate(e) {
				this.datevalue = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.v-content {}
</style>
